<template>
    <div>
        <!--头部-->
        <div v-for="(item,index) in SongDetails" :key=index class="songDetailBox">
            <div class="header">
                <van-icon name="arrow-left"/>
                <span class="spanLeft" @click="goback">返回</span>
                <span class="spanRight">{{item.name}}</span>
            </div>

            <div class="songBoxBig">
                <!--                歌词页-->
                <div v-show="!isShow" @click="isShow=!isShow" class="lyric" ref="songWord">

                    <div v-for="(item, index) in lyric" :key="index" :class="activeIndex == index ? 'active' : ''" >
                        {{ item.comments}}
                    </div>
                </div>

                <img src="../../../assets/img/needle-ip6.png" alt="" class="totaionImg" v-show="isShow">
                <div class="totaionBox" v-show="isShow">
                    <!--                 黑元碟-->
                    <div class="blackCircle" v-show="isShow">
                        <!--                    旋转动画-->
                        <div class="totation" v-show="isShow" >
                            <img :src="item.al.picUrl" alt="" @click="isShow=!isShow" >
                        </div>

                    </div>
                </div>
                <!--            底部播放-->
                <div class="videoPlay">
                    <ul class="videoList1">
                        <li><img src="../../../assets/img/list-3.png" alt=""></li>
                        <li><img src="../../../assets/img/list-4.png" alt=""></li>
                        <li><img src="../../../assets/img/list-2.png" alt=""></li>
                    </ul>
                    <!--                    换行-->
                    <br>
                    <br>
                    <div class="vantChange">
                        <van-slider :max="max" v-model="valaue" @change="onChange"/>
                    </div>
                    <ul class="videoList2">
                        <li><img src="../../../assets/img/循环.png" alt=""></li>
                        <li><img src="../../../assets/img/pre_l.png" alt=""></li>
                        <li class="buttonLi">
                            <!--                播放按钮-->
                            <button @click="play('play')" v-show="isPlay"><img src="../../../assets/img/play.png"
                                                                               alt=""></button>
                            <button @click="play('pause')" v-show="!isPlay"><img src="../../../assets/img/pause.png"
                                                                                 alt=""></button>
                            <audio :src="songSrc" ref="audio" @timeupdate="changeProgress" controls
                                   v-show="flag"></audio>
                        </li>
                        <li><img src="../../../assets/img/pre_r.png" alt=""></li>
                        <li><img src="../../../assets/img/列表.png" alt=""></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'vant';
    import {getSongDetails, getLyrics} from "@/api/api"

    export default {
        name: "SongListDetail",
        data() {
            return {
                max: 100,
                // active: 0,
                icon: {
                    active: 'https://img.yzcdn.cn/vant/user-active.png',
                    inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
                    valaue: 50,
                },
                //歌词详情
                SongDetails: [],
                songSrc: "",
                //是否显示
                isShow: true,
                // Lyric: null,
                //是否播放
                isPlay: true,
                valaue: 0,
                flag: false,
                // //处理后的歌词
                lyric: [],
                //   当前歌词开始时间
                songTime: null,
                //   当前歌词索引
                activeIndex: 0,
                //当前歌曲播放时间
                currentTime: "",
                //    选中歌词
                // current: 0,


            }
        },
        // components:{
        //     bottom
        // },
        created() {
            getSongDetails(this.$route.query.songId).then((res) => {
                console.log(res)
                this.songSrc = `https://music.163.com/song/media/outer/url?id=${res.privileges[0].id}.mp3`
                this.SongDetails = res.songs
            })
            getLyrics(this.$route.query.songId).then((res) => {
                console.log(res)
                // 回车符的歌词删除
                let arr = res.lrc.lyric.split(/\n/);
                arr.forEach((element) => {
                    //  正则表达式
                    let timeArr = element.match(/\[\d*:\d*\.\d*\]/g);
                    // 歌词只剩下字
                    let comments = element.replace(timeArr, "");
                    let min = Number(element.match(/\[\d*/)[0].replace("[", ""));
                    let sec = Number(element.match(/:\d*/)[0].replace(":", ""));
                    // 当前歌词开始的时间
                    let songTime = min * 60 + sec;
                    this.lyric.push({songTime, comments});
                    // this.songTime = songTime;
                });
            })

        },
        methods: {
            // 返回上一级
            goback() {
                this.$router.go(-1)
            },
            //底部播放按钮
            play(value) {
                // this.valaue=100
                console.log(this.$refs.audio)
                this.isPlay = !this.isPlay
                if (value == 'play') {
                    //    获取dom
                    this.$refs.audio[0].play()
                } else {
                    this.$refs.audio[0].pause()
                }
            },
            //滑块引入
            onChange(value) {
                Toast('当前值：' + value);
                //    滑块改变歌曲进度
                this.$refs.audio[0].currentTime = value
                this.currentTime = value
                // this.currentTime=value
            },
            changeProgress(e) {
                e.target
                //当前播放时间
                this.valaue = e.target.currentTime
                this.currentTime = e.target.currentTime
                // console.log(e.target.currentTime)
                //    歌词总时间
                this.max = e.target.duration
            },
        },
        watch: {
            currentTime() {
                // 遍历歌词数组
                for (let i = 0; i < this.lyric.length; i++) {

                    if (this.currentTime < this.lyric[i].songTime) {
                        if (i > 0) {
                            this.activeIndex = i - 1;
                            this.$refs.songWord[0].scrollTop = this.$refs.songWord[0].children[this.activeIndex].offsetTop - 150;
                            break;
                        }

                    }
                }
            },
        },
    }
</script>

<style scoped>

    /*歌词样式设置*/
    .songWords {
        position: absolute;

    }

    .active {
        color: #cd0c6e;
    }

    .songBoxBig {
        height: 100%;
        width: 100%;
        margin-top: 20px;
        position: fixed;
        background-color: #74b6ce;
    }

    .header i {
        color: #02ea47;
        font-size: 14px;
        padding: 10px 5px 0 10px;
    }

    .spanLeft {
        color: #02ea47;
        font-size: 16px;
    }

    .spanRight {
        margin-left: 25%;
    }

    /*    动画布局*/
    .totaionBox {
        width: 100%;
        height: 300px;
        /*background: #ad0e0e;*/
        /*position: relative;*/
        /*border: 1px solid red;*/
        padding-top: 100px;
    }

    /*黑圈*/
    .blackCircle {
        background-image: url("../../../assets/img/blackCircle.png");
        background-repeat: no-repeat;
        /*background-size: 300px 300px;*/
        background-size: cover;
        height: 300px;
        width: 300px;
        /*border: 2px solid #02ea47;*/
        margin: auto;
        line-height: 300px;
        position: relative;
    }

    /*打碟*/
    .totaionImg {
        position: absolute;
        top: 8px;
        right: 85px;
        height: 180px;
        width: 115px;
        z-index: 111;
        transform-origin: left top;
        -webkit-animation: my 1s linear;
        transform: rotate(-15deg);
    }

    /*歌词盒子*/
    .lyric {
        /*display: flex;*/
        position: absolute;
        /*border: 1px solid red;*/
        text-align: center;
        height: 400px;
        width: 300px;
        overflow: auto;
        margin: 0 auto;
        left: 10%;
        top: 10%;
        /*transform: translate(50%, 50%);*/
    }

    /*动画盒子*/
    .totation {
        position: absolute;
        height: 200px;
        width: 200px;
        margin: auto;
        line-height: 100px;
        bottom: 0;
        top: 0;
        right: 0;
        left: 0;
        border-radius: 50%;
        overflow: hidden;
    }

    @keyframes my {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(-15deg);
        }
    }

    /*声明动画*/
    @keyframes move {
        0% {
            left: 0;
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    /*动画旋转*/
    .totation img {
        height: 100%;
        width: 100%;
        -webkit-animation: move 10s linear infinite;
        transform-origin: center;
    }

    /*    底部播放*/

    audio {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 80px;
        height: 30px;
        width: 100%;
        /*border: 1px solid blue;*/
    }

    /*底部播放*/
    .videoPlay {
        position: fixed;
        height: 200px;
        width: 100%;
        /*background-color: #61b6ea;*/
        bottom: -69px;
    }

    /*第一个ul盒子*/
    .videoList1 li {
        float: left;
        height: 60px;
        width: 20%;
        /*border: 1px solid red;*/
        padding-left: 13%;
    }

    /*第一个ul盒子的图片*/
    .videoList1 li img {
        height: 30px;
        width: 30px;
    }

    /*第二个ul盒子*/
    .videoList2 li {
        float: left;
        height: 60px;
        width: 40px;
        /*border: 1px solid red;*/
        padding-left: 9%;
        position: relative;
    }

    /*播放按钮里的图片*/
    .buttonLi button img {
        height: 50px;
        width: 50px;
        /*border: 1px solid red;*/
    }

    /*播放按钮*/
    .buttonLi button {
        background: none;
        border: none;
        position: absolute;
        bottom: 16px;
        right: 0px;
    }

    /*滑块*/
    .vantChange {
        height: 30px;
        width: 90%;
        /*background-color: red;*/
        line-height: 30px;
        position: relative;
        margin-top: 20px;
        margin-left: 21px;
    }

    /*    滑块球球改变大小*/
    /deep/ .van-slider__button {
        height: 15px;
        width: 15px;
    }


</style>